<template>
  <div class="nteach">
    <div class="title2">数字化教学</div>
    <!--之前定义了title类-->
    <div class="tBox">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
            <img :src="item.pic" />
          </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <ul class="tList">
        <li class="link column">国家教育资源公共服务平台</li>
        <li class="link column">MOOC网</li>
        <li class="link column">学堂在线</li>
        <li class="link column">腾讯课堂</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { reactive, onMounted } from 'vue'
import Swiper from 'swiper' // 引入库
import 'swiper/css/swiper.css' // 引入样式文件，注意5和6版本的样式文件不一致
import icon_right_1 from '@/assets/image/t1.jpg' //引入的图片,只能引入，不能直接写路径
import icon_right_2 from '@/assets/image/t2.jpg'
import icon_right_3 from '@/assets/image/t3.jpg'
import icon_right_4 from '@/assets/image/t4.jpg'
import icon_right_5 from '@/assets/image/t5.jpg'
export default {
  name: 'HomeSwiper',
  setup() {
    onMounted(() => {
      new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        autoplay: true, //自动滚动
        effect: 'fade', //渐变切换
        navigation:{
          nextEl:'.swiper-button-next',
          prevEl:'.swiper-button-prev'
        }
      })
    })
    let imgs = reactive([
      { pic: icon_right_1 },
      { pic: icon_right_2 },
      { pic: icon_right_3 },
      { pic: icon_right_4 },
      { pic: icon_right_5 }
    ])
    return {
      imgs
    }
  }
}
</script>
<style lang="less" scoped>
.nteach {
  width: 100%;
  height: 50vh;
  padding:0;
  margin-top: 5px;
  border: 1px solid rgb(255, 225, 53);
}

.title2 {
  color: #fff;
  background-color: rgb(177, 1, 1);
  font-size: 0.375rem;
  font-weight: 900;
  font-family: monospace;
  height: 6vh;
  line-height: 0.625rem;
  padding-left: 0.25rem;
}
.tBox {
  display: block;
  height: 44vh;
  .swiper-container {
    flex: 5;
    width: 100%;
    height: 36vh;
    //border-style: none;
    .swiper-slide {
      width: 100% !important;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .swiper-button-next::after,.swiper-button-prev::after{
      color:red;
    }
  }
  .tList {
    width: 100%;
    height: 8vh;
    line-height: 8vh;
    .link {
      float: left;
      padding: 0.5%;
      font-size: 15px;
      text-align: center;
      color: rgba(255, 202, 0, 0.7);
    }
    .link:hover{
      color:red;
      cursor: pointer;
    }
  }
}
</style>
